<template>
  <div class="login-wrapper">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-content">
      <h3 class="login-title">叩丁狼客户管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%;" type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import qs from "qs";
import { loginApi } from "../../request/httpApi";
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "账号不能为空！！！", trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "密码不能为空！！！", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    login() {
      console.log(this.$refs.ruleForm);
      // validate校验表单
      this.$refs.ruleForm.validate(vali => {
        if (vali) {
          console.log("表单校验成功");
          // post方法第二个参数是接口的参数
          // {
          //   username: this.ruleForm.username,
          //   password: this.ruleForm.pwd
          // }
          // console.log('username=' + this.ruleForm.username + '&password='+ this.ruleForm.pwd)
          const params = {
            username: this.ruleForm.username,
            password: this.ruleForm.pwd
          };
          // const preUrl = process.env.NODE_ENV == "development" ? "/api" : "";
          console.log(params); //username=terry&password=1
          // loginApi() === axios.post(preUrl + '/tokens', )
          // axios.post(preUrl + "/tokens", params).then(res => {
            loginApi(params).then(res => {
            if (res.success) {
              localStorage.setItem("token", res.data);
              this.$router.push("/employee");
            } else {
              this.$message({
                message: res.msg || "登录失败",
                type: "error"
              });
            }
          });
        } else {
          console.log("表单校验失败");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #324057;
  .login-content {
    width: 330px;
    height: 210px;
    .login-title {
      color: #fff;
      text-align: center;
      padding-bottom: 20px;
      font-size: 24px;
    }
  }
}
</style>